<script setup lang="ts">
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";

const userStore = useUserStore();
const date: Date = new Date();

const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 6 && hours < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (hours >= 8 && hours < 12) {
    return "上午好，" + useUserStore().user.nickname + "！";
  } else if (hours >= 12 && hours < 18) {
    return "下午好，" + useUserStore().user.nickname + "！";
  } else if (hours >= 18 && hours < 24) {
    return "晚上好，" + useUserStore().user.nickname + "！";
  } else if (hours >= 0 && hours < 6) {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});

const duration = 3000;

// 销售额
const amount = ref(0);
const amountOutput = useTransition(amount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
amount.value = 2000;

// 访客数
const visitCount = ref(0);
const visitCountOutput = useTransition(visitCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
visitCount.value = 2000;

// IP数
const dauCount = ref(0);
const dauCountOutput = useTransition(dauCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
dauCount.value = 2000;

// 订单量
const orderCount = ref(0);
const orderCountOutput = useTransition(orderCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
orderCount.value = 2000;
</script>

<template>
  <div class="dashboard-container">

    <!-- 数据卡片 -->
    <PanelGroup />
    <!-- Echarts 图表 -->
    <!-- <el-row :gutter="10" class="mt-3">
      <el-col :sm="24" :lg="8" class="mb-2">
        <BarChart
          id="barChart"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>

      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
        <PieChart
          id="pieChart"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>

      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
        <RadarChart
          id="radarChart"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>
    </el-row> -->
    <el-row :gutter="0" class="custom-row" >
      <el-col :xs="24" :sm="24" :lg="12" style="margin-left: -20px;padding-left: 20px;">
        <div class="chart-wrapper" style="height: 350px;background-color: white;padding-top: 20px;padding-left: 10px;box-sizing: border-box;">
          <!-- <raddar-chart /> -->
          <div class="topbox" style="background-color: white;">
            <div class="small" style="padding-left: 5px;border-left: 3px solid rgba(34, 205, 172, 1);">代付额度统计</div>
            <div class="small" style="display: flex;height: 20px;line-height: 20px;align-items: center;">
              <p
                style="width:25px ;height: 13px;background-color:rgba(32, 141, 255, 1) ;border-radius: 5px;margin-right: 15px;"
              />
              代付总额
            </div>
            <div class="small" style="display: flex;height: 20px;line-height: 20px;align-items: center;">
              <p
                style="width:25px ;height: 13px;background-color:rgba(48, 216, 184, 1) ;border-radius: 5px;margin-right: 15px;"
              />
              代付充值
            </div>
            <div class="small2" style="color: rgba(32, 141, 255, 1);">代付总额 ￥15,263</div>
            <div class="small2" style="color: #30d8b8;">代付总额 ￥15,263</div>
          </div>
          <BarChart />
        </div>

      </el-col>
      <el-col :xs="24" :sm="24" :lg="12" style="background-color: white;padding-top: 20px;padding-left: 10px;box-sizing: border-box;margin-right: 0px;">
        <div class="chart-wrapper" style="height: 330px;">
          <div class="topbox">
            <div class="small2" style="width: 300px; padding-left: 5px;border-left: 3px solid rgba(34, 205, 172, 1);">平台商户统计</div>
            <div style="display: flex;justify-content: space-between;">
              <div class="small" style="display: flex;width: 152px;height: 20px;line-height: 20px;align-items: center;">
                <p
                  style="width:25px ;height: 13px;background-color:rgba(32, 141, 255, 1) ;border-radius: 5px;margin-right: 15px;"
                />
                代付总额
              </div>
              <div class="small" style="display: flex;height: 20px;line-height: 20px;align-items: center;">
                <p
                  style="width:25px ;height: 13px;background-color:rgba(48, 216, 184, 1) ;border-radius: 5px;margin-right: 15px;"
                />
                代付充值
              </div>
            </div>
          </div>
          <PieChart style="margin-top: 50px;"/>
        </div>
      </el-col>
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-top: 20px;box-sizing: border-box;" >
      <div class="title" style="padding-left: 6px;border-left: 3px solid rgba(34, 205, 172, 1);">近七日平台交易金额</div>
      <LineChart class="chart-bottom" />
    </el-row>

  </div>
</template>

<style lang="scss" scoped>
.custom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -20px;
  overflow: hidden;
}


.dashboard-container {
  position: relative;
  padding: 24px;
  height: 100%;
  overflow-y: auto;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
}



.topbox {
  width: 100%;
  height: 21px;
  display: flex;
  font-size: 13px;

  // justify-content: space-around;
  .small {
    width: 152px;
    // background-color: pink;
  }

  .small2 {
    width: 152px;
   //background-color: skyblue;
  }
}

.chart-wrapper {
  width: 100%;
  /* 确保内部图表容器充满el-col */
}
.chart-bottom {
  width: 100%;
  //background-color: pink;
}
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
